<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="1.5" >
          <el-button
              type="primary"
              size="mini"
              @click="add()"
            >新增</el-button>
        </el-col>
      </el-row>
    </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <el-table-column label="课程名" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.course.courseName }}
          </template>
        </el-table-column>
        <el-table-column label="教师名称" width="110" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.teacher.username}}</span>
          </template>
        </el-table-column>
        <el-table-column label="课程性质" width="200" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.courseNature.courseNatureName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="课程学期" width="200" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.term}}</span>
          </template>
        </el-table-column>
        <el-table-column label="选课人数" width="160" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.curNum}}/{{scope.row.maxNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="选课状态" width="150" align="center">
          <template slot-scope="scope" >
            <el-button type="success" v-show="scope.row.status" plain >已选</el-button>
            <el-button type="danger" v-show="!scope.row.status" plain >未选</el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="add(scope.row)" >选课</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.csId)">退选</el-button>
          </template>
        </el-table-column>
      </el-table>
    
    <el-pagination @size-change= "handleSizeChange" @current-change= "handleCurrentChange" :current-page= "PageSet.pageNum"
        :page-sizes="[10, 30, 50, 100]" :page-size="PageSet.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="PageSet.total">
    </el-pagination>



  </div>
</template>

<script>
import {getList, queryCourse, selectCourse, deleteCourse} from '@/api/student/'

export default {

  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      test: {},
      listCourseTeacher: null,
      listStatus: [{}],
      list: null,
      listLoading: true,
      status:'',
      PageSet: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示的行数
        total: 100
      },
      addParam: {
        userId:'',
        ctId:'',
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleSizeChange: function(size) {
      this.PageSet.pageSize = size
      this.fetchData()
    },
    handleCurrentChange: function(pageNum) {
      this.PageSet.pageNum = pageNum
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      this.listStatus = [{}]
      queryCourse(this.PageSet, this.$store.state.user.userId,this.$store.state.user.majorId).then(response => {
        this.PageSet.total = response.data.items.total
        this.list = response.data.items.list
        this.listLoading = false
      }).then(()=>{
        getList(this.PageSet, this.$store.state.user.userId).then(response => {
          this.listCourseTeacher = response.data.items.list[0].courseStudentVoList
          for (let i = 0; i < this.listCourseTeacher.length; i++) {
            this.$set(this.test,'ctId',this.listCourseTeacher[i].courseTeacherVo.ctId)
            this.$set(this.test,'csId',this.listCourseTeacher[i].csId);
            this.listStatus.push(this.test)
            this.test={}
          }
        }).then( ()=> {
          console.log(this.listStatus)
          for (let i = 0; i < this.list.length; i++) {
            for (let j = 0; j < this.listStatus.length; j++) {
              if (this.listStatus[j].ctId == this.list[i].ctId) {
                this.list[i].status = 1
                this.list[i].csId = this.listStatus[j].csId
                break
              }
            }
          }
           
        })
      })


    },
    handleDelete(csId) {
      this.$confirm('此操作将退选该课程,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(function() {
        return deleteCourse(csId);
      }).then(() => {
        this.fetchData();
        this.$message({
          type: 'success',
          message: '退选成功!'
      }); 
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    add(row){
      this.addParam.userId = this.$store.state.user.userId
      this.addParam.ctId = row.ctId;
      selectCourse(this.addParam).then(response => {
        this.$message({
          type: 'success',
          message: '选课成功!'
        }); 
        this.fetchData()
      })
    },
  }
}
</script>
